<template>
  <div class="loginBox">
    <el-form :model="formData" ref="formData" @keyup.enter.native="submit">
      <div class="formItem">
        <span class="svg-container">
          <iconSvg icon-class="userOutLine"></iconSvg>
        </span>
        <el-input
          placeholder="请输入账号"
          autofocus
          v-model="formData.userName">
        </el-input>
      </div>
      <div class="formItem">
        <span class="svg-container">
          <iconSvg icon-class="password"></iconSvg>
        </span>
        <el-input
          placeholder="请输入密码"
          show-password
          v-model="formData.password">
        </el-input>
      </div>
      <!--<div class="formItem">
        <span class="svg-container">
          <iconSvg name="password"></iconSvg>
        </span>
        <el-input
          placeholder="请输入验证码"
          v-model="formData.captcha">
        </el-input>
        <span class="code-img" style="display: flex; align-items: center">
          <img :src="validateCode" alt="" @click="reloadValidateCode">
        </span>
      </div>-->
    </el-form>
    <div class="errorTips">{{errorTips}}</div>
    <div class="btnGroup">
      <el-button class="btn" :loading="loading" type="primary" style="width: 100%; padding: 17px; font-size: 16px" @click="submit">登 录</el-button>
    </div>
  </div>
</template>

<script>
  export default {
    name: "loginPassWord",
    data () {
      return {
        formData: {
          userName: 'wenshijun',
          password: '123456',
        },
        countNum: 0,
        countNumInterval: '',
        errorTips: '',
        appList: [],
        loading: false,
      }
    },
    methods: {
      checkForm () {
        let {userName, password} = this.formData
        if (!userName) {
          this.errorTips = '请填写账号'
          return false
        }
        if (!password) {
          this.errorTips = '请填写密码'
          return false
        }
        return true
      },
      submit () {
        if (!this.checkForm()) return
        this.loading = true
        this.$emit('submit', this.formData)
      },
      setNumberValue (event, key) {
        let val = event.replace(/[^0-9]/g, '');
        this.formData[key] = val
      }
    }
  }
</script>

<style>
  @import "login.css";
  .btn_get_code {
    white-space: nowrap;
    padding: 0 10px;
    display: flex;
    align-items: center;
    border: 1px solid #eee;
    border-radius: 3px;
    width: 100px;
    justify-content: center;
    cursor: pointer;
  }
  .errorTips {
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #f56c6c;
    margin-bottom: 15px;
  }
  .svg-container {
    position: absolute;
    z-index: 999;
    top: 50%;
    transform: translateY(-50%);
    left: 10px;
  }
</style>
